<template>
  <div>
    <nav-bar>
      <div slot="center" class="title-center">登录</div>
      <div slot="right" class="title-right" @click="register">注册</div>
    </nav-bar>
    <div class="img-logo">
      <van-image
        round
        width="74"
        height="74"
        src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
    </div>
    <p class="app-name">乐享生活</p>

    <div class="login-user user-phone">
      <img width="20" height="20" src="~assets/image/login_phone.png" alt="" />
      <span></span>
      <van-cell-group>
        <van-field v-model="phone" type="tel" placeholder="请点击输入手机号" />
      </van-cell-group>
    </div>
    <div class="login-user user-password">
      <img
        width="20"
        height="20"
        src="~assets/image/login_password.png"
        alt=""
      />
      <span></span>
      <van-cell-group>
        <van-field
          v-model="password"
          type="password"
          placeholder="请点击输入密码"
        />
      </van-cell-group>
    </div>

    <div class="login-pwd">
      <div @click="isPwd">
        <img :src="isPasswords" width="15" height="15" />
        记住密码
      </div>
      <span @click="ForgetLoginPasswordClick">忘记密码？</span>
    </div>

    <van-button block @click="login">登录</van-button>
  </div>
</template>
<script>
import { getApiLogin } from "network/ApiServe";

import NavBar from "common/NavBar.vue";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      phone: "18220392076", // 18625616360 18953339938
      password: "a123456", //ll820808
      isPassword: false,
      loginCkNo: require("../assets/image/login_ck_no.png"),
      loginCkYes: require("../assets/image/login_ck_yes.png"),
    };
  },
  computed: {
    isPasswords() {
      return this.isPassword ? this.loginCkYes : this.loginCkNo;
    },
  },
  methods: {
    // isPwd
    isPwd() {
      this.isPassword = !this.isPassword;
      console.log(this.isPassword);
    },
    // 注册
    register() {
      // console.log("register -- oncilck");
      this.$router.push("register");
    },
    ForgetLoginPasswordClick() {
      this.$router.push("/forgetLoginPassword");
    },
    login() {
      if (this.phone.length != 11) {
        this.$toast("请输入手机号或者手机号码不正确");
        return;
      }
      console.log("login -- onlogin");
      console.log("phone -- :" + this.phone);
      console.log("password -- :" + this.password);
      // this.phone.trim()
      getApiLogin(this.phone.trim(), this.password.trim())
        .then((res) => {
          console.log(res);
          if (res.resp_code != "000000") {
            this.$toast(res.resp_message);
            return;
          }
          localStorage.setItem("token", res.result.userToken);
          localStorage.setItem("userId", res.result.id);
          localStorage.setItem("brandId", res.result.brandId);
          localStorage.setItem("phone", res.result.phone);
          localStorage.setItem("city", res.result.city);
          localStorage.setItem("preUserPhone", res.result.preUserPhone);
          localStorage.setItem("appName", res.result.brandname);

          this.$store.commit("SET_TOKEN", res.result.userToken);
          this.$store.commit("SET_BRANDID", res.result.brandId);
          this.$store.commit("SET_CITY", res.result.city);
          this.$store.commit("SET_PREUSERPHONE", res.result.preUserPhone);

          this.$router.push("home");
        })
        .catch((err) => {
          console.log("getApiLogin:" + err);
        });
    },
  },
};
</script>
<style scoped>
.title-center {
  font-size: 17px;
  font-weight: 550;
  text-align: center;
  font-family: "zihun35hao-jindianyahei";
  color: #2c2c2c;
}
.title-right {
  font-size: 16px;
}
.img-logo {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
.app-name {
  margin-top: 20.5px;
  text-align: center;
  font-family: "zihun35hao-jindianyahei";
  font-size: 20px;
  font-weight: 550;
  color: #2c2c2c;
}
.login-user {
  width: 287px;
  height: 55px;
  line-height: 55px;
  margin: 0 auto;
  background-color: #f5f5f5;
  border-radius: 3px;
  padding-left: 18px;
  padding-right: 20px;
  text-align: center;
  align-items: center;
  display: flex;
}
.login-user span {
  width: 1px;
  height: 23px;
  background-color: #d8d8d8;
  margin-left: 11.5px;
  margin-right: 13px;
  justify-items: center;
}
.van-field {
  background-color: #f5f5f5;
  padding: 0;
}
.user-phone {
  margin-top: 60.5px;
}
.user-password {
  margin-top: 17.5px;
}
.login-pwd {
  width: 287px;
  margin: 20px auto 0;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.login-pwd > div {
  text-align: center;
}
.login-pwd img {
  vertical-align: bottom;
}
.van-button {
  width: 287px;
  margin: 43.5px auto 0;
  background-color: #121212;
  color: #f1ce8a;
  font-size: 17px;
  text-align: center;
}
</style>